<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云头部</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .top{
            height: 70px;
            background-color: #242424;
            box-sizing: border-box;
            border-bottom: 1px solid #000;
        }

        .topbar{
            display: flex;
            justify-content: space-between;
 
            /* align-items: center; */
            height: 69px;
            /* 这个行高其实会继承到下面的属性，这就是为什么a元素height有69px的原因 */
            line-height: 69px;
            /* background-color: red; */
        }

        .topbar .bar-left{
            display: flex;
        }

        .topbar .bar-left .logo{
            /* 设置精灵图 */
            background-image: url(../images/topbar_sprite.png);
        }
        .topbar .bar-left .logo a{
            /* 必须设置成其他类型元素，因为a标签是行内非替换元素，这个元素有些属性不会生效，比较特别 */
            /* 而且就是因为设置成了块级元素，上面继承下来的line-height才会生效，
               否则行内非替换元素是无法被行高撑起来的 */
            display: block;
            /* 隐藏a标签里面的文字，该文字仅仅是SEO优化 必须带上单位px */
            text-indent: -999px;

            width: 157px;
            padding-right: 20px;
        }
        .topbar .bar-left .list{
            display: flex;
        }
        .topbar .bar-left .list .item{
            /* 配合下面小箭头的绝对定位 */
            position: relative;
            /* 因为a标签是行内元素，所以从上继承下来的line-height没用，因此这里设置成块级元素
               同时因为撑大的也只是li，然后在flex布局下，li已经被分配了空间，所以设置成block也没事 */
            display: block;
            color: #ccc;
            font-size: 16px;
            /* 这里使用Padding还能顺便与其他兄弟元素拉开距离，并撑大自身盒子 */
            padding: 0 20px;
        }
        .topbar .bar-left .list .item:hover, 
        .topbar .bar-left .list .item.active{
            color: #fff;
            background-color: #000;
        }
        .topbar .bar-left .list .item.active::after{
            content: "";
            position: absolute;
            width: 12px;
            height: 7px;
            background: url(../images/topbar_sprite.png) -226px 0;
            bottom: -2px;
            /* 绝对元素水平居中大法 */
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        /* hot小图标 */
        .topbar .bar-left .list .item .icon-hot{
            /* 这里只用定位就行了，因为引入了通用的css，大小和精灵图都设置好了 */
            position: absolute;
            top: 15px;
            right: -15px;
            /* width: 28px;
            height: 19px;
            background: url(../images/topbar_sprite.png) -190px 0; */
        }

        .topbar .bar-right{
            display: flex;
            padding-right: 20px;
            align-items: center;
        }

        /* 登录有三种状态 */
        .topbar .bar-right .login a{
            color: #787878;
        }
        /* 触碰到login区域就变一次色，继承了69px */
        .topbar .bar-right .login:hover a{
            color: #ccc;
        }
        /* 触发到a标签又变色，同时因为a标签不能继承69px，所以这里是实打实放到文字上才有效果 */
        .topbar .bar-right .login a:hover{
            color: #787878;
            text-decoration: underline;
        }

        .topbar .bar-right .author a{
            display: inline-block;
            width: 90px;
            height: 32px;
            margin: 0 20px;
            color: #ccc;
            border: 1px solid #4f4f4f;
            border-radius: 20px;
            box-sizing: border-box;

            /* 这里因为从上面继承下来了line-height为69，所以没有居中对齐 */
            /* 同时因为text-align默认为left，这里要想居中就设置为center */
            line-height: 32px;
            text-align: center;
        }
        .topbar .bar-right .author a:hover{
            color: #fff;
            border-color: #fff;
        }
        .topbar .bar-right .search{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            /* 往里面挤10px也相当于给盒子变长10px，本来Input标签挤在右侧 */
            padding-right: 10px;
            /* 所以这里需要加上这个属性 */
            box-sizing: border-box;

            width: 158px;
            height: 32px;
            /* 也可以使用display:flex+align-items:center解决 */
            line-height: 32px;
            text-align: center;
            border-radius: 30px;
            background: #fff url(../images/topbar_sprite.png) 0 -99px;
        }
        .topbar .bar-right .search input{
            /* input是有默认宽高的，除非单独设置 */
            width: 118px;
        }
        .nav{
            height: 35px;
            line-height: 35px;
            background-color: #C20C0C;
            box-sizing: border-box;
            border-bottom: 1px solid #a40011;
        }
        .navbar{
            /* 如果这个盒子里面没有内容的话，就算继承了line-height也没用
               因为line-height是对内容生效的 */
            /* background-color: #0f0; */
            box-sizing: border-box;
            padding-left: 180px;
        }

        .navbar .list{
            display: flex;
        }

        .navbar .list .item{
            display: inline-block;
        }

        .navbar .list .item span{
            display: inline-block;
            padding: 0 13px;
            margin: 7px 17px;
            height: 20px;
            line-height: 20px;
            border-radius: 21px;

            color: #fff;
        }

        .navbar .list .item:hover span,
        .navbar .list .item.active span
        {
            background-color: #9B0909;
        }


    </style>
</head>
<body>
    <div class="top">
        <!-- wrapper_01是定义在common.css中的 -->
        <div class="topbar wrapper_01">
            <div class="bar-left">
                <!-- 这里logo里面加h1然后还加文字，当然会把文字隐藏起来，目的是触发SEO优化 -->
                <h1 class="logo">
                    <a href="#">网易云音乐</a>
                </h1>
                <ul class="list">
                    <li><a href="#" class="item active">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li>
                        <a href="#" class="item">
                            下载客户端
                            <!-- hot小图标 前两个class是common.css里的，设置上后就有精灵图图标 -->
                            <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="bar-right">
                <div class="search">
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </div>
                <div class="author"><a href="#">创作者中心</a></div>
                <div class="login"><a href="#">登录</a></div>
            </div>
        </div>
    </div>

    <div class="nav ">
        <div class="navbar wrapper_01">
            <!-- 如果block元素中没有内容，那么line-height继承过来也没用 -->
            <ul class="list">
                <li><a href="#" class="item active"><span>推荐</span></a></li>
                <li><a href="#" class="item"><span>排行榜</span></a></li>
                <li><a href="#" class="item"><span>歌单</span></a></li>
                <li><a href="#" class="item"><span>主播电台</span></a></li>
                <li><a href="#" class="item"><span>歌手</span></a></li>
                <li><a href="#" class="item"><span>新碟上架</span></a></li>
            </ul>
        </div>
    </div>

</body>
</html>